@import '../../../css/Variable.styl'

.smallSize
  & .switch
    width 30px
    height 17px
  & .slider.round
    border-radius 17px
    &:before
      height 13px
      width 13px
      left 2px
      bottom 2px
  & input:checked + .slider:before
    transform translateX(13px)

.btnswitch
  display flex
  align-items center
  &__text
    margin-inline standardSpacing
    text-overflow ellipsis
    overflow hidden

    &.disabled
      color darkGrey1

  &.rightAligned
    flex-direction row-reverse

.switch
  position relative
  display inline-block
  margin-bottom 0
  width 60px
  height 34px

  & input
    display none

.slider
  position absolute
  cursor pointer
  top 0
  left 0
  right 0
  bottom 0
  -webkit-transition .4s
  transition .4s

  &.defaultBg
    background-color darkGrey1

  &.disabled
    background-color lightGrey1
    cursor not-allowed

  &:before
    position absolute
    content ""
    height 26px
    width 26px
    left 4px
    bottom 4px
    background-color white
    -webkit-transition .4s
    transition .4s

input:focus + .slider
  box-shadow 0 0 1px offWhite

input:checked + .slider:before
  -webkit-transform translateX(26px)
  -ms-transform translateX(26px)
  transform translateX(26px)

/* Rounded sliders */
.slider.round
  border-radius 34px

.slider.round:before
  border-radius 50%
